* {
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
}

/*想让谁居中，就在它外面的div设置display:flex容器*/
body > div {
    width: 1000px;
    /*height: 50px;*/
    /* 边框三个参数： 边框的大小  边框的形状：实线   边框的颜色,这三个参数可以交换位置*/
    /*border: 1px solid red;*/
}

/*头部*/
/*div的宽度只有1000px，而图片的宽度比较大*/

.top {
    /*地址的路径：绝对路径和相对路径*/
    /*background-image: url("/img/banner_qtah.jpg");*/
    background-image: url("../img/banner_qtah.jpg");
    height: 500px;
    /*width: 1920px;*/
    /*height: calc(808px * 1000 / 1920);*/
    /*    需要设置背景图片的宽度和高度应该和当前的div一至*/
    background-size: 100% 100%;
    /*    设置颜色*/
    color: white;
}

/*子代，只管儿子，后代，所有的元素都快可以拿到*/
.top > div {
    /*border: 1px solid blue;*/
    display: flex;
    justify-content: center;
}

.top > div > div {
    /*border: 1px solid yellow;*/
    width: 900px;
}

.top > div:nth-child(1) > div {
    display: flex;
    justify-content: space-between;
}

.top > div:nth-child(1) > div > div:nth-child(1) {
    height: 141px;
}

/*.top > div:nth-child(1) > div > div:nth-child(2)*/
.phone {
    display: flex;
    align-items: center;
}

.phone > div {
    margin: 5px;
}

/*导航-----------------------*/
.nav {
    background-color: rgb(230, 145, 55);
    height: 40px;
}

.nav > div {
    display: flex;
    align-items: center;
}

.nav > div > div {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
}

/*鼠标移上去事件*/
.nav > div > div:hover {
    background-color: white;
    color: rgb(230, 145, 55);
    cursor: pointer;
}

/*广告*/
.ad > div:nth-child(1) {
    padding: 20px 0 10px 0;
    font-size: 30px;
    display: flex;
}

.ad > div:nth-child(1) > div:nth-child(2) {
    margin: 0 10px;
}

.ad > div:nth-child(2) {
    font-size: 10px;
}

.ad > div:nth-child(2) > div {
    line-height: 20px;
}

.ad > div:nth-child(3) {
    font-size: 25px;
    color: rgb(230, 145, 55);
}

.ad > div:nth-child(3) > div:nth-child(1) {
    display: flex;
    align-items: flex-end;
}

/*逗号，叫做分组选择器*/
/*.ad>div:nth-child(3)>div:nth-child(1)>div:nth-child(1),.ad>div:nth-child(3)>div:nth-child(1)>div:nth-child(3){*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/
/*.ad>div:nth-child(3)>div:nth-child(1)>div:nth-child(3){*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/
/*pw {*/
/*    color: white;*/
/*    font-size: 15px;*/
/*}*/
/*odd奇数，even偶数*/
.ad > div:nth-child(3) > div:nth-child(1) > div:nth-child(odd) {
    color: white;
    font-size: 15px;
}

.ad > div:nth-child(3) > div:nth-child(2) {
    /*margin-left: 30px;*/
    /*缩进*/
    text-indent: 1.5em;
}
